<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3616779_xsp5g0y61le.css">
    <style>
        *{padding: 0; margin: 0;}
        ul,li{
            list-style: none;
        }
        header{
            width: 600px;
            margin: 30px auto;
        }
        .list{
            width: 600px;
            margin: 0 auto;
        }
        .list li{
            /* 弹性盒 */
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 30px;
            padding: 0 10px;
            border-bottom: 1px solid #ddd;
        }
        .list li span{
            flex: 1;
            text-indent: 20px;
            /* margin-right: auto;
            margin-left: 20px; */
        }
        .list i{
            color: #f00;
        }
    </style>
</head>
<body>
    <header>
        <input id="input" type="text">
        <button class="add">添加</button>
    </header>

    <ul class="list">
        <h2>正在进行</h2>
        <li>
            <input type="checkbox">
            <span>content</span>
            <i class="iconfont icon-delete"></i>
        </li>
        <li>
            <input type="checkbox">
            <span>content</span>
            <i class="iconfont icon-delete"></i>
        </li>
    </ul>

    <script>
        // 获取元素
        const addBtn = document.querySelector(".add");
        const input = document.querySelector("#input");
        const list = document.querySelector(".list");
        // 绑定事件(事件流：事件捕获、事件冒泡)
        // addEventListener第三个参数是是否开启事件捕获
        // 箭头函数this的问题 
        addBtn.addEventListener("click",function(){
            // 创建一个li元素
            const li = document.createElement("li");
            // 模板字符串
            li.innerHTML = `
                <input type="checkbox">
                <span>${input.value}</span>
                <i class="iconfont icon-delete"></i>
            `;
            list.appendChild(li); 
        },false)
        // addBtn.onclick = function(){

        // }
        // 删除功能
        // 事件委托（利用事件冒泡的机制）
        list.addEventListener("click",function(e){
            if(e.target.nodeName == "I"){
                list.removeChild(e.target.parentNode)
            }
        })
        // 新增列表删除不了
        // const deleteBtns = document.querySelectorAll(".list i")
        // for(let i=0; i<deleteBtns.length; i++){
        //     deleteBtns[i].addEventListener("click",function(){
        //         list.removeChild(this.parentNode)
        //     })
        // }

    </script>


    

    <!-- 
        web开发一（html、css）
        web开发二（js）
        JS进阶
        H5C3 
    -->

    <!-- 移动Web开发 -->
    <!-- 
    前端开发工程化：
        系统化
        模块化-js代码（import export）
        组件化-页面
        规范化
        自动化（下学期） 
    -->
</body>
</html>